<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        #page-wrapper h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        #page-wrapper h1 em{ font-size: 14px; color: #999; margin-left: 50px; font-weight: normal; font-style: normal;}
        #fileValue {
            opacity: 0;
            width: 0px;
            height: 0px;
            font-size: 0px;
        }
        #file {
            display: inline-block;
        }
        #fileValue{ width: 0; height: 0; opacity: 0; font-size: 0;}
        #myTable{ font-size: 14px;}
        .pro-box{ position: relative;}
        .pro-type-tit{ display: inline-block; width: 22px; line-height: 22px; border-radius: 50%; margin-right: 10px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .remove-btn{ position: absolute; top: 0; left: 50%; z-index: 300; width: 30px; line-height: 30px; border-radius: 50%; margin-right: 12px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .add-btn{ cursor: pointer;}
        .add-btn b{ display: inline-block; width: 30px; line-height: 30px; border-radius: 50%; margin-right: 12px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .choose-btn{ display: inline-block; padding: 0 12px; line-height: 34px; background-color: #D7D7D7; cursor: pointer; border-radius: 5px; text-align: center; font-size: 14px;}
    </style>
</head>
<body>

<div id="page-wrapper">
    <div class="panel panel-f5">
        <div class="panel-body row">
            <form id="Form" class="form-horizontal" method="post">
                <input type="hidden" id="_ctx" value="${basePath}"/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">绑定协议：</span>
                    <div class="col-sm-9 col-xs-8">
                        <span v-if="dataObj.tipId" v-text="dataObj.tipName"></span>
                        <input type="hidden" name="tipId" v-model="dataObj.tipId">
                        <div v-if="dataObj.tipId" v-for="(item,index) in firstCent" class="firstCent-li">
                            <span class="tit">{{item.name}}：</span>
                            <input type="hidden" name="centId" :value="item.id">
                            佣金：<input class="form-control" type="text" name="centPercent" v-model="item.percent"> % 或
                            <input class="form-control" type="text" name="centPrice" v-model="item.price"> 元
                        </div>
                        <span class="choose-btn" @click="layType=2,tipFlag=true,search(1)">选择</span>

                    </div>
                </div>

                <hr>
                <div class="form-group">
                    <span class="control-label col-sm-4 col-xs-4"></span>
                    <div class="col-sm-8 col-xs-8">
                        <button type="button" class="btn btn-success" @click="submitForm"><i class="fa fa-check"></i> 提交
                        </button>
                    </div>
            </form>
        </div>
    </div>

    <!--产品弹窗-->
    <div class="choose-tip-bg" v-show="tipFlag">
        <div class="choose-tip-box">
            <div class="tit" style="margin-bottom: 0;"><b>绑定协议</b><span @click="tipFlag=false">关闭</span></div>
            <div class="panel-body panel-white" style=" height: 85%; overflow: auto">
                <form id="myForm" class="form-inline form-margin-right">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" size="32" placeholder="请输入产品名称关键字">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                    </div>
                </form>
                <div class="table-responsive">
                    <table v-if="layType==1" id="myTable"
                           class="table table-hover"
                           data-url="${basePath}/admin/product/info/json"
                           data-pageSize="10,50,100" data-method="GET">
                        <thead>
                        <!-- 需要循环的字段  对应mapper文件-->
                        <tr>
                            <th  data-type="xuhao">ID</th>
                            <th  data-field="name" data-call="true">姓名</th>
                            <th  data-field="officeName">所属体系</th>
                            <th  data-field="button" data-call="true">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbodyId">

                        </tbody>
                    </table>
                    <table v-if="layType==2" id="myTable"
                           class="table table-hover"
                           data-url="${basePath}/admin/product/info/json"
                           data-pageSize="10,50,100" data-method="GET">
                        <thead>
                        <!-- 需要循环的字段  对应mapper文件-->
                        <tr>
                            <th  data-type="xuhao">序号</th>
                            <th  data-field="name" data-call="true">协议名称</th>
                            <th  data-field="button" data-call="true">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbodyId">

                        </tbody>
                    </table>
                </div>
                <!-- 分页条-->
                <div class="row">
                    <div align="left" class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="pageCount"></span> <select
                                id="pageSize" onchange="search(1)" class="form-control"
                                style="width: 100px"></select>
                        </div>
                    </div>
                    <div align="right" class="col-xs-6">
                        <ul class="pagination" id="pagination"></ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
    <script type="text/javascript">
        $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>' +
                '<script src="${basePath}/bootstrap/js/bootstrapValidator-zh_CN.js"><\/script>');
    </script>
    <script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${basePath}/bootstrap/js/campsite.js" type="text/javascript"></script>
    <script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
    <script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
    <script>

        var lay = {};
        var selectPro;
        var vue = new Vue({
            el: "#page-wrapper",
            data: {
                layType: 1,
                dataObj: {
                    phone: "",
                    name: "",
                    cardId: "",
                    province: "",
                    city: "",
                    area: "",
                    superName: "",
                    superId: "",
                    tipName: "",
                    tipId: ""

                },
                firstCent: [
                    {id:1, name:"一区总代", percent:20},
                    {id:2, name:"一区特级代理点", percent:20},
                    {id:3, name:"代理商", price:20}
                ],
                //选择类型
                tipFlag: false
            },
            created: function(){
                var _this = this;
                //如果是编辑页面 执行数据获取
                var id = '${dto.id}';
                if(id){
                    $.ajax({
                        url: '${basePath}/admin/order/product/detail/'+id,
                        type: 'GET',
                        dataType: 'json',
                        data: {},
                        success: function(data){
                            _this.dataObj = data.result;
                        },
                        error: function(){
                            console.log("error")
                        }
                    })
                }
            },
            methods: {
                //提交
                submitForm: function(){
                    var bsVal = $("#Form").data('bootstrapValidator');
                    bsVal.validate();
                    if (bsVal.isValid()) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            url: '${basePath}/admin/product/info/save',
                            data: $("#Form").serialize(),
                            success: function (data) {
                                if (data.code == '0') {
                                    layer.alert('操作成功', {
                                        icon: 1
                                    }, function () {
                                        window.location.href = '${basePath}/admin/product/info';
                                    })
                                } else {
                                    layer.alert(data.desc, {
                                        icon: 5
                                    });
                                }
                            },
                            error: function () {
                                layer.alert('系统错误', {
                                    icon: 5
                                });
                            }
                        });

                    }
                    else {
                        var smallTop = $("small:visible").eq(0).offset().top - 50;
                        $("html,body").animate({scrollTop: smallTop}, 300);
                    }
                },
                //删除
                removeBind: function(){
                    this.dataObj.superName = "";
                    this.dataObj.superId = "";
                }

            },
            mounted: function(){
                var _this = this;
                selectPro = function(obj){
                    console.log(obj)
                    if(_this.layType==1){
                        _this.dataObj.superName = obj.name;
                        _this.dataObj.superId = obj.value;
                    }
                    else{
                        _this.dataObj.tipName = obj.name;
                        _this.dataObj.tipId = obj.value;
                    }
                    _this.tipFlag = false;
                }
            }
        });

        //循环列表数据以及操作按钮
        function tableCallBack(data, id){
            if(id == 'button') {//增加操作按钮
                var _button = '<button type="button" name="'+data.name+'" value="'+data.id+'" onclick="selectPro(this)">选择</button> ';
                return _button;
            }
            else {
                if(data[id] == null || data[id] == ''){
                    return '';
                }else{
                    return data[id];
                }
            }
        }

    </script>
</body>
</html>
